<template>
  <div class="agenda">
    <div class="ftitle">Agenda</div>
    <div class="agendacontainer maxw">
      <el-tabs type="border-card" class="tabs">
        <el-tab-pane>
          <span slot="label" class="tab_title">
            <p>All Dates</p>
            <p>26/11-29/11</p>
          </span>
          <div class="agendabox">
            <div
              class="agenda_item"
              v-for="(item, index) in dateList"
              :key="'i' + index"
            >
              <div class="agenda_item_title bold">{{ item.title }}</div>
              <el-row
                class="info"
                v-for="(sitem, index) in item.itemlist"
                :key="'s' + index"
              >
                <el-col :span="4" class="col">
                  <div class="grid-content bg-purple">
                    <p class="bold">{{ sitem.title }}</p>
                  </div>
                </el-col>
                <el-col :span="20" class="col">
                  <div class="grid-content bg-purple-light">
                    <p class="bold">{{ sitem.detail[0] }}</p>
                    <p>{{ sitem.detail[1] }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" class="tab_title">
            <p>Sunday</p>
            <p>26/11</p>
          </span>
          <div class="agendabox">
            <div class="agenda_item">
              <div class="agenda_item_title bold">{{ dateList[0].title }}</div>
              <el-row
                class="info"
                v-for="(sitem, index) in dateList[0].itemlist"
                :key="'s' + index"
              >
                <el-col :span="4" class="col">
                  <div class="grid-content bg-purple">
                    <p class="bold">{{ sitem.title }}</p>
                  </div>
                </el-col>
                <el-col :span="20" class="col">
                  <div class="grid-content bg-purple-light">
                    <p class="bold">{{ sitem.detail[0] }}</p>
                    <p>{{ sitem.detail[1] }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" class="tab_title">
            <p>Monday</p>
            <p>27/11</p>
          </span>
          <div class="agendabox">
            <div class="agenda_item">
              <div class="agenda_item_title bold">{{ dateList[1].title }}</div>
              <el-row
                class="info"
                v-for="(sitem, index) in dateList[1].itemlist"
                :key="'s' + index"
              >
                <el-col :span="4" class="col">
                  <div class="grid-content bg-purple">
                    <p class="bold">{{ sitem.title }}</p>
                  </div>
                </el-col>
                <el-col :span="20" class="col">
                  <div class="grid-content bg-purple-light">
                    <p class="bold">{{ sitem.detail[0] }}</p>
                    <p>{{ sitem.detail[1] }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" class="tab_title">
            <p>Tuesday</p>
            <p>28/11</p>
          </span>
          <div class="agendabox">
            <div class="agenda_item">
              <div class="agenda_item_title bold">{{ dateList[2].title }}</div>
              <el-row
                class="info"
                v-for="(sitem, index) in dateList[2].itemlist"
                :key="'s' + index"
              >
                <el-col :span="4" class="col">
                  <div class="grid-content bg-purple">
                    <p class="bold">{{ sitem.title }}</p>
                  </div>
                </el-col>
                <el-col :span="20" class="col">
                  <div class="grid-content bg-purple-light">
                    <p class="bold">{{ sitem.detail[0] }}</p>
                    <p>{{ sitem.detail[1] }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label" class="tab_title">
            <p>Wednesday</p>
            <p>29/11</p>
          </span>
          <div class="agendabox">
            <div class="agenda_item">
              <div class="agenda_item_title bold">{{ dateList[3].title }}</div>
              <el-row
                class="info"
                v-for="(sitem, index) in dateList[3].itemlist"
                :key="'s' + index"
              >
                <el-col :span="4" class="col">
                  <div class="grid-content bg-purple">
                    <p class="bold">{{ sitem.title }}</p>
                  </div>
                </el-col>
                <el-col :span="20" class="col">
                  <div class="grid-content bg-purple-light">
                    <p class="bold">{{ sitem.detail[0] }}</p>
                    <p>{{ sitem.detail[1] }}</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <button type="button" class="toregbtn" @click="$router.push('/reg')">
        Register Now
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dateList: [
        {
          title: "26 November 2023",
          itemlist: [
            {
              title: "16:00 EAT",
              detail: ["Arrival & Registration", "16:00-19:00"],
            },
            {
              title: "19:00 EAT",
              detail: ["Welcome Reception", "19:00-22:00"],
            },
          ],
        },
        {
          title: "27 November 2023",
          itemlist: [
            {
              title: "08:30 EAT",
              detail: ["Plenary Sessions + Breakouts", "08:30-18:00"],
            },
            {
              title: "19:00 EAT",
              detail: ["Gala Awards Dinner", "19:00-23:00"],
            },
          ],
        },
        {
          title: "28 November 2023",
          itemlist: [
            {
              title: "08:30 EAT",
              detail: ["Plenary Sessions + Breakouts", "08:30-18:00"],
            },
            {
              title: "19:00 EAT",
              detail: ["Free Night", "19:00-23:00"],
            },
          ],
        },
        {
          title: "29 November 2023",
          itemlist: [
            {
              title: "08:30 EAT",
              detail: ["TakeCare Activity", "08:30-11:00"],
            },
            {
              title: "13:00 EAT",
              detail: ["Depart at Lunch", "13:00-14:00"],
            },
          ],
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.agenda {
  .agendacontainer {
    position: relative;
    margin: 3rem auto;
    padding: 0.94rem;
    text-align: right;
    .tabs {
      //
      .tab_title {
        p {
          text-align: center;
          font-family: "RidleyBold";
        }
      }
      .agendabox {
        width: 100%;
        .agenda_item {
          margin-top: 0.625rem;
          .agenda_item_title {
            font-size: 1.3125rem;
            color: #282828;
            line-height: 1.3;
            font-style: normal;
            background-color: #f18f61;
            padding: 0.625rem;
            text-align: left;
          }
          .info {
            text-align: left;
            padding-top: 0.625rem;
            .col {
              padding: 0.5rem;
              padding-right: 0;
              .grid-content {
                p {
                  padding-left: 0.5rem;
                }
              }
              .bg-purple-light {
                padding: 1rem 1.25rem;
                border: 1px solid #282828;
                box-sizing: border-box;
                p {
                  line-height: 1.8;
                }
              }
            }
          }
        }
      }
    }
    //button
    .toregbtn {
      margin-top: 3rem;
    }
  }
}
</style>
<style>
.bold {
  font-family: "RidleyBold";
}
.el-tabs__nav-wrap {
  margin-bottom: 0 !important;
}
.el-tabs--border-card {
  border: 0 !important;
  box-shadow: none !important;
}
.el-tabs--border-card > .el-tabs__header {
  background-color: #f18f61 !important;
  border-bottom: 0 !important;
}
.el-tabs__item {
  height: auto !important;
  line-height: 1.5 !important;
  font-size: 1rem !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  padding: 0.625rem 1.25rem !important;
  margin-top: 0 !important;
  color: #000000 !important;
  border: 0 !important;
  width: 150px !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 0 !important;
}
/* 内容部分 */
.el-tabs--border-card > .el-tabs__content {
  padding: 0 !important;
  margin-top: 3rem;
}
/* 滚动箭头 */
.el-tabs__nav-next,
.el-tabs__nav-prev {
  top: 0.625rem !important;
  font-size: 1.2rem !important;
  color: #000000 !important;
}
</style>
